<template>
  <uni-popup ref="datePop"
             type="top"
             :is-mask-click="false"
             background-color="#fff"
  >
    <div class="date-selector">
      <div class="date-title">
        <span class="title__text">筛选</span>
        <a @click="close">
          <uni-icons type="close" size="24"></uni-icons>
        </a>
      </div>
      <div class="date-range-picker">
        <div class="grid-warp">
          <a :class="['grid-item',item.value === form.active ? 'active':'']"
             v-for="item in gridData.rows"
             :key="item.value + item.label"
             @click="rangeSelect(item.value)"
          >
            <span class="grid__text">{{ item.label }}</span>
          </a>
        </div>
      </div>
      <div class="footer">
        <div class="range-input">
          <div class="input__title">开始时间</div>
          <div class="selector-date" @click="dateChange">
            <uni-datetime-picker
              inputShow
              type="date"
              placeholder="请选择开始时间"
              v-model="form.st"
            ></uni-datetime-picker>
          </div>
          <div class="input__title">结束时间</div>
          <div class="selector-date" @click="dateChange">
            <uni-datetime-picker
              inputShow
              type="date"
              placeholder="请选择结束时间"
              v-model="form.et"
            />
          </div>
        </div>

        <div class="btn">
          <button class="uni-btn uni-btn-radius" type="primary" @click="onSubmit">搜索</button>
        </div>
      </div>
    </div>
  </uni-popup>
</template>

<script setup>
import {ref, watch, nextTick, watchEffect, reactive} from 'vue';
import {Calender} from "@/utils/dateUtils";
import {StringUtils} from "@/utils/StringUtils";


const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  value: {
    type: String,
    default: '0'
  }
})

const emits = defineEmits(['update:show', 'confirm', 'update:value'])

const datePop = ref(null);

const gridData = reactive({
  rows: [
    {label: '不限', value: '0'},
    {label: '今日', value: '1'},
    {label: '昨日', value: '2'},
    {label: '本周', value: '3'},
    {label: '本月', value: '4'},
    {label: '本年', value: '5'},
    {label: '上周', value: '6'},
    {label: '上月', value: '7'},
    {label: '去年', value: '8'},
  ]
})

const form = reactive({
  active: '0',
  st: '',
  et: ''
})

watchEffect(() => {
  if (!datePop.value) {
    return
  }
  datePop.value[props.show ? 'open' : 'close']();
})

const close = function () {
  datePop.value['close']();
  emits('update:show', false)
}

const dateChange = function () {
  emits('update:value', '0');
  form.active = '0';
}

const rangeSelect = function (index) {
  let c = new Calender();
  form.active = index;
  let selectors = [
    [form.st, form.et],
    c.today(),
    c.yesterday(),
    c.currentWeek(),
    c.currentMonth(),
    c.currentYear(),
    c.lastWeek(),
    c.lastMonth(),
    c.lastYear(),
  ]
  if (+index >= selectors.length - 1) {
    form.st = '';
    form.et = '';
  }
  let values = selectors[index] || [];

  let [st, et] = values;
  form.st = st;
  form.et = et;
}
watch(() => props.value, (v) => {
  form.active = v;

  rangeSelect(v)
}, {
  immediate: true
})

const onSubmit = function () {
  let {st,et} = form
  let emptyDate = [st,et].some(item=>StringUtils.isEmptyOrNull(item));
  if(emptyDate){
    form.st = ''
    form.et = ''
    form.active = '0'
    emits('confirm', form);
    emits('update:type', '0')
    emits('update:show', false);
    return
  }
  emits('confirm', form);
  emits('update:value', form.active);
  emits('update:show', false);
}
</script>

<style lang="scss" scoped>
.date-selector {
  position: relative;
  padding: 12rpx 32rpx 0;

  .date-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .title__text {
      font-size: 32rpx;
      font-weight: 600;
    }
  }

  .date-range-picker {
    margin: 22rpx 0;
    padding: 0 22rpx;

    .grid-warp {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
      gap: 35rpx;

      .grid-item {

        &.active {
          color: #00a0fb;
        }
      }
    }

    .grid__text {
      margin: 12rpx 0;
    }
  }

  .footer {
    .range-input {
      position: relative;
      .input__title{
        font-size: 14px;
        margin: 12rpx 8rpx;
        color: #333;
      }

      .selector-date{
        border-radius: 4px;
        border: 1px #cccccc solid;
      }
    }

    .btn {
      margin-top: 32rpx;
    }
  }

}
</style>
